/**
*@author ymhui
*@createTime 02 10:05
*@description
*/
<template>
  <el-card class="map-card">
    <div id="lfd-map" :style="style"></div>
  </el-card>
</template>

<script>
    const eCharts = require('echarts');
    import chinaJson from '../../static/json/china';
    import huBeiJson from '../../static/json/HUBEI';

    export default {
        name: "LfdMap",
        data() {
            return {
                style: "height:31em; text-align:center",
                zoom: 1.2,
                monitorPoint: [],
                noMonitorPoint: [],
                mapData: [
                    {name: '武汉市', value: 5},
                    {name: '黄石市', value: 2},
                    {name: '孝感市', value: 6},
                    {name: '宜昌市', value: 12},
                    {name: '十堰市', value: 1},
                    {name: '襄阳市', value: 7},
                    {name: '恩施市', value: 4},
                    {name: '鄂州市', value: 8},
                    {name: '潜江市', value: 9},
                    {name: '仙桃市', value: 11},
                    {name: '随州市', value: 12},
                    {name: '咸宁市', value: 13},
                    {name: '荆门市', value: 19},
                    {name: '荆州市', value: 3},
                    {name: '黄冈市', value: 5},
                    {name: '天门市', value: 7},
                    {name: '神农架林区', value: 7},
                ],
                chinaData: [
                    {name: '新疆维吾尔自治区', value: 5},
                    {name: '西藏自治区', value: 2},
                    {name: '内蒙古自治区', value: 6},
                    {name: '青海省', value: 12},
                    {name: '四川省', value: 1},
                    {name: '黑龙江省', value: 7},
                    {name: '甘肃省', value: 4},
                    {name: '云南省', value: 8},
                    {name: '广西壮族自治区', value: 9},
                    {name: '湖南省', value: 11},
                    {name: '陕西省', value: 12},
                    {name: '广东省', value: 13},
                    {name: '吉林省', value: 19},
                    {name: '河北省', value: 3},
                    {name: '湖北省', value: 5},
                    {name: '贵州省', value: 7},
                    {name: '山东省', value: 7},
                    {name: '江西省', value: 5},
                    {name: '河南省', value: 2},
                    {name: '辽宁省', value: 6},
                    {name: '山西省', value: 12},
                    {name: '安徽省', value: 1},
                    {name: '福建省', value: 7},
                    {name: '浙江省', value: 4},
                    {name: '江苏省', value: 8},
                    {name: '重庆市', value: 9},
                    {name: '宁夏回族自治区', value: 11},
                    {name: '海南省', value: 12},
                    {name: '台湾省', value: 13},
                    {name: '北京市', value: 19},
                    {name: '天津市', value: 3},
                    {name: '上海市', value: 5},
                    {name: '香港特别行政区', value: 7},
                    {name: '门特别行政区', value: 7}
                ]
            }
        },
        props: {
            isFullScreen: Boolean
        },
        computed: {},
        methods: {
            createMap() {
                let chart = document.getElementById('lfd-map');
                chart.removeAttribute("_echarts_instance_");
                const myChart = eCharts.init(chart);
                eCharts.registerMap('hubei', huBeiJson);
                myChart.setOption(this.calOption());
            },
            calOption() {
                let series = [];
                series.push(this.buildEffectScatterSeries());
                series.push(this.buildLinesSeries());
                return {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.name + ' : ' + params.value[2];
                        }
                    },
                    backgroundColor: '',        // 图表背景色
                    geo: {
                        map: 'hubei',
                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        zoom: this.zoom,
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: '#00274c',
                                borderColor: '#00fff9',
                                borderWidth: 0.5,
                                borderType: 'solid',
                                shadowBlur: 5,
                                shadowColor: 'rgb(193,236,255,0.5)',
                                shadowOffsetX: 3,
                                shadowOffsetY: 1,
                                opacity: 1,
                            },
                            emphasis: {
                                areaColor: '#00296e'
                            }
                        },
                        layoutCenter: ['50%', '50%'],
                        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
                        layoutSize: '100%'
                    },
                    series: series
                }
            },
            convertData(data) {
                let resultData = huBeiJson.features.map(item => {
                    let cp = item.properties.cp;
                    let value;
                    for (let j in data) {
                        if (data[j].name === item.properties.name) {
                            value = data[j].value;
                            cp.push(value);
                            break;
                        }
                    }
                    return {
                        name: item.properties.name,
                        value: cp
                    }
                });
                return resultData;
            },
            convertLinesData(data) {
                //console.log(huBeiJson);
                let cp = [];
                for (let i = 0; i < huBeiJson.features.length; i++) {
                    if (huBeiJson.features[i].properties.name === "武汉市") {
                        cp = huBeiJson.features[i].properties.cp;
                        break;
                    }
                }
                let toArea = {
                    name: "武汉市",
                    cp: cp
                };
                //console.log(toArea);
                let linesData = [];
                for (let index in data) {
                    if (data[index].name === toArea.name) {
                        continue;
                    }
                    //let fromCoords = [];
                    let coords = [];
                    for (let j = 0; j < huBeiJson.features.length; j++) {
                        if (huBeiJson.features[j].properties.name === data[index].name) {
                            coords.push(huBeiJson.features[j].properties.cp);
                            break;
                        }
                    }
                    coords.push(toArea.cp);
                    let lineData = {
                        fromName: data[index].name,
                        toName: toArea.name,
                        coords: coords
                    };
                    linesData.push(lineData);
                }
                //console.log(linesData);
                return linesData;
            },
            buildEffectScatterSeries() {
                return {
                    name: '监测点个数',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: this.convertData(this.mapData),
                    symbol: 'circle',
                    symbolSize: 14,
                    rippleEffect: {
                        period: 4,
                        scale: 3,
                        brushType: 'fill',
                    },
                    label: {
                        normal: {
                            show: true,
                            trigger: 'item',
                            position: 'inside',
                            color: '#ffffff',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: 15,
                            formatter: function (params) {
                                return params.value[2];
                            }
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            // color: params => {
                            //     if (params.name === '武汉市') {
                            //         return '#ffdd00';
                            //     } else {
                            //         return '#00aeff';
                            //     }
                            // }
                            color: {
                                type: 'radial',
                                x: 0,
                                y: 0,
                                r: 6,
                                colorStops: [{
                                    offset: 0, color: '#52feff' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#ffffff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        emphasis: {
                            borderColor: '#ff8300',
                            borderWidth: 1
                        }
                    }
                }
            },
            buildLinesSeries() {
                let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
                return {
                    name: "数据传输",
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 1,
                    symbol: ['none', 'none'],
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.5,
                        symbol: 'circle',
                        symbolSize: 12,
                        color: 'rgb(255,255,255,1)',
                        // constantSpeed:30
                    },
                    lineStyle: {
                        normal: {
                            // color: new echarts.graphic.LinearGradient(
                            //     0, 0, 0, 1,
                            //     [
                            //         {offset: 0.2, color: '#f0b000'},
                            //         {offset: 0.5, color: '#f0cc82'},
                            //         {offset: 1, color: '#fff6f1'}
                            //     ]),
                            color: '#00eeff',
                            width: 0.5,
                            opacity: 1,
                            curveness: 0.5
                        }
                    },
                    data: this.convertLinesData(this.mapData)
                }
            },
            wrapStyle() {
                if (this.isFullScreen) {
                    this.style = "height:38em; text-align:center";
                    this.zoom = 1.5;
                } else {
                    this.style = "height:31em; text-align:center";
                    this.zoom = 1.2
                }
            }
        },
        watch: {
            isFullScreen(oldValue, newValue) {
                if (oldValue !== newValue) {
                    this.wrapStyle();
                }
            }
        },
        mounted() {
            this.createMap();
        }
    }
</script>

<style lang="scss" scoped>
  .map-card {
    background-color: transparent;
    border-width: 0;
    /*box-shadow: inset 0px 0px 20px 20px rgba(254, 253, 255, 0.1);*/
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */
    border-color: #03a6ff
  }
</style>
